<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

		/*
		transition-property			规定过渡css名称		//width: 100px;
		transition-duration			规定过渡时间		//默认: 0;
		transition-timing-function	规定过渡的时间曲线	//默认: ease;
		transition-delay			规定过渡效果何时开始//默认: 0;
		 */

		.a{
			width: 300px;
			height: 300px;
			color: #fff;
			background-color: #000;
			border-radius: 150px;
			-webkit-transition: -webkit-transform 1s;
			transition: -webkit-transform .5s;
			/*transition-delay: 1s;  /*1秒后才执行*/
		}
		span{
			height: 300px;
			line-height: 300px;
		}
		.a:hover{
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}

		
	</style>
</head>
<body>

	<div class="a">
		<span>旋转</span>
	</div>

	
</body>
</html>
